<template>
    <div>
        <Tabs :value=tabName :animated="false" @on-click="tabChange($event)">
            <TabPane :label=cateTypes[0] name="name0"></TabPane>
            <TabPane :label=cateTypes[1] name="name1"></TabPane>
            <TabPane :label=cateTypes[2] name="name2"></TabPane>
        </Tabs>
        <Upload
            multiple
            type="drag"
            name="file"
            :show-upload-list="false" 
            :on-success="onSuccess"
            action="http://localhost:3000/upload/profile"
            :data="fileData">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>Click or drag files here to upload</p>
            </div>
        </Upload>
        <i-input v-model="searchText" style="width:400px;float:left;margin-right:20px;" >
            <Button slot="append" icon="ios-search" @click="search()"></Button>
        </i-input>
        <Button type="error" class="ivu-btn1"  @click="removeMany()">删除多个</Button>

        <Table border :columns="columns" :data="data" @on-selection-change="addSelectData($event)" style="margin:10px 0"></Table>
        <Page :total="total" :current="page" size="small" show-elevator show-sizer @on-change="pageChange($event)" @on-page-size-change="pageSizeChange($event)"></Page>
    </div>    
</template>
<script>
    export default {    
        data () {
            return {
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Originalname',
                        key: 'originalname'
                    },
                    {
                        title: 'Filename',
                        key: 'filename'
                    },
                    {
                        title: 'Mimetype',
                        key: 'mimetype'
                    }, 
                    {
                        title: 'CateType',
                        key:'cateType'
                    },                   
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {                                            
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data:[],
                tabName:'name0',
                type:0,
                cateTypes:['风景','美食','人物'],
                fileData:{
                    type:0,
                    cateType:'风景'
                },
                module:'upload',
                searchText:'',
                total:0,
                limit:10,
                page:1
            }
        },
        methods: {
            //选项卡切换
            tabChange(event){
                console.log(event);
                this.tabName=event;
                this.type=event.slice(-1);
                console.log(this.type);
                this.fileData={type:this.type,cateType:this.cateTypes[this.type]};
                //console.log(this.fileData);
                this.searchText='';
                this.getData();
            },
            //上传成功
            onSuccess(){
                console.log(this.fileData)
                this.getData();
            },
            
            //显示详情
            show (index) {
                this.$Modal.info({
                    title: 'Upload Info',
                    content: `CateType:${this.data[index].cateType}<br>Originalname:${this.data[index].originalname}<br>Filename:${this.data[index].filename}<br>Mimetype:${this.data[index].mimetype}`
                })
            },

            //删除单个
            remove (index) {
                var id=this.data[index]._id;
                if(this.data.length==1&&this.page!=1){
                    this.page-=1
                }
                this.$Modal.confirm({
                    title: '确认删除？',
                    content: '是否确认删除',
                    onOk: () => {                        
                        this.$http.delete(`http://localhost:3000/${this.module}/data/${id}`)
                        .then(res=>{
                            this.$Message.info('删除成功！');
                            this.getData();
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除！');
                    }
                });
                
            },
            search(){
                console.log('search');
                this.page=1;
                this.getData();
            },
            pageChange(event){ 
                /* console.log(event);   */
                this.page=event;
                this.getData();
            },
            pageSizeChange(event){
                this.limit=event;
                this.getData();
        
            },
            getData(){
                /* console.log(this.type) */
                this.$http.post(`http://localhost:3000/${this.module}/list/${this.type}`,{name:this.searchText,limit:this.limit,page:this.page}).then(res=>{
                    console.log(res.data.docs);
                    this.data=res.data.docs;
                    this.total=res.data.total;
                    this.page=res.data.page;
                    //console.log(this.total,this.page)
                });  
            },

            //删除多个
            removeMany () {
                if(this.selectData&&this.selectData.length>0){
                    this.$Modal.confirm({
                        title: '确认删除？',
                        content: '是否确认删除',
                        onOk: () => {                               
                            this.manyDelete();                           
                        },
                        onCancel: () => {
                            this.$Message.info('取消删除');
                        }
                    });
                }else{
                    this.$Message.error('删除目标未选定');                     
                }               
            },
            manyDelete(){
                var selectDataID=[];
                for(var i=0;i<this.selectData.length;i++){
                    selectDataID.push(this.selectData[i]._id);
                }
                console.log(selectDataID);                
                this.$http.post(`http://localhost:3000/${this.module}/manydata/delete`,{id:selectDataID}).then(res=>{
                    this.$Message.info('删除成功');
                    if(this.data.length==selectDataID.length&&this.page!=1){
                        this.page-=1
                    }
                    this.getData();
                }); 
            },
            addSelectData(event){
                console.log(event);
                this.selectData=event;
            },          
        },
        created() {
            this.getData();
        }
    }
</script>